<template>
  <div>
  <el-pagination :current-page.sync="page.pageNum" :page-size.sync="page.pageSize" :pager-count="pagerCount||9" :total="page.pageTotal" background @current-change="change" @size-change="change"
    :layout="layout"></el-pagination>
  </div>
</template>
<script>
export default {
  name: "pagination",
  props: {
    value:{
      type:Object
    },
    pagerCount:{
      type:Number,
      default:9
    },
    layout:{
      type:String,
      default:"total, sizes, prev, pager, next, jumper"
    }
  },
  data(){
    return{
      page:{
        pageNum:1,
        pageSize:20,
        pageTotal: 0,
      }
    }
  },
  computed: {
  },
  watch:{
  },
  methods: {
    change(){
      this.$emit('input',this.page)
      this.$emit('change',this.page)
    }
  },
  mounted(){
    if(this.value){
      this.page = {
        pageNum: this.value.pageNum || 1,
        pageSize: this.value.pageSize ||20,
        pageTotal: this.value.pageTotal ||0,
      }
    }
    this.$emit('input',this.page)
  }
}
</script>
<style lang="scss" scoped>
</style>
